<template>
  <div>
    <h4>{{ msg }}</h4>
    <table border="1">
      <tr>
        <td>
          <strong>{{ one }}</strong>
        </td>
      </tr>
      <tr>
        <td>{{ two }} <input type="number" v-model.number="num" /></td>
      </tr>
      <tr>
        <td><button @click="fn">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单：总价：￥ {{ price }} 元 折后价：￥ {{ paid }} 元 省了：￥
          {{ discount }} 元
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "欢迎光临_vue开发的收银系统_水果店",
      one: "苹果10￥/斤，折扣<8折>",
      two: "请输入你要购买的斤数",
      num: "",
      price: "",
      discount: "",
      paid: "",
    };
  },
  methods: {
    fn() {
      this.price = this.num * 10;
      this.paid = this.price * 0.8;
      this.discount = this.price * 0.2;
    },
  },
};
</script>

<style scoped>
h4 {
  text-align: center;
}
table {
  width: 800px;
  text-align: center;
  margin: 0 auto;
}
</style>
